import React from 'react'
import { useEffect, useState } from 'react'
import { useHistory } from "react-router-dom";
import axios from 'axios';
import collcss from './css/collections.module.css'
function Index(props) {
    const history = useHistory();  
    const [data, setdata] = useState([]);
    const [len, setlen] = useState(0);
    useEffect(async () => {
        await axios("/yywd/collections").then((res) => {
            setdata(res.data);
            // console.log(res.data);
            setlen(res.data.length)
        })
    }, []);
    function loadmore2() {
        axios(`/yywd/loadmore2?start=${len}`).then((res1) => {
            setdata(data.concat(res1.data));
            setlen(data.length + 9);
        })
    };
    function routerTo(el) {
        history.push({
            pathname: `/collectionsdetail/${el.typename}`,
            state:{
                typename:el.typename,
                titleimg:el.titleimg
            }
        })
    }
  
    return (
        <section className={collcss.collections}>
            <div className={collcss.container}>
                <div className={collcss.list_container}>
                    <div className={collcss.lists}>
                        {data.map((el, index) => {
                            return <div className={collcss.lists_items} key={index}>
                                <div className={collcss.items_img}>
                                    <img src={el.typeimg} alt="" onClick={()=>routerTo(el)}/>
                                    <div className={collcss.items_text}>
                                        <p className={collcss.items_title}>{el.typename}</p>
                                        <p className={collcss.items_jianjie}>{el.typedescribe}</p>
                                    </div>
                                </div>
                                <div className={collcss.items_shoucang}>
                                    <hr />
                                    <div className={collcss.items_meta}>
                                        <p className={collcss.number}>6篇文章</p>
                                        <div className={collcss.btn}>收藏</div>
                                    </div>
                                </div>
                            </div>
                        })}
                    </div>
                    <div className={collcss.loadbtn}>
                        <div className={collcss.loadmore} onClick={() => loadmore2()}>加载更多</div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Index;